<template>
	<!-- 收付款记录 -->
	<view class="shell_wp">
		<view class="bg" style="background-image: url('https://img.jinghushi.com/images/0/2025/07/e6raLLKzoROkfoakKLiOZoipm4L4tZ.png');">
			<view class="tit_box" :class="{'fixed':topStatus}">
				<view class="img_box" @click="$navBack()">
					<image src="/pages/business/static/c_refund_arror.png" mode=""></image>
				</view>
				<text>到店买单明细</text>
			</view>
			<view class="detail_msg" :class="{'detail_msg2':topStatus}">
				<image class="dmt_image" src="/pages/business/static/cl_bg.png" mode=""></image>
				<view class="top">
					<text class="color_2">补贴米券（元）</text>
					<view class="color_1">{{allMoneyObj.already||0}}</view>
				</view>
				<view class="d_center">
					<view class="min_del">
						<text class="color_3">营业金额（元）</text>
						<view>{{allMoneyObj.sale||0}}</view>
					</view>
					<image class="line" src="/pages/business/static/c_line.png" mode=""></image>
					<view class="min_del">
						<text class="color_3">商家让利（元）</text>
						<view>{{allMoneyObj.fee||0}}</view>
					</view>
					<image class="line" src="/pages/business/static/c_line.png" mode=""></image>
					<view class="min_del">
						<text class="color_3">实际到账（元）</text>
						<view>{{allMoneyObj.supCapital||0}}</view>
					</view>
				</view>
				<image class="none_line" src="/pages/business/static/dashed_line.png" mode=""></image>
				<view class="btom flex">
					<view class="bt_tit color_3">
						点击切换：
					</view>
					<view class="update_msg color_2">
						<text v-for="item,i in listTime" :key="i" :class="{'choose_time':chooseType==i}"
							@click="changTimeData(i)">{{item.name||0}}</text>
						<!-- <text>上月</text>
						<text>本月</text>
						<text>昨日</text>
						<text>今日</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="transaction_details">
			<view class="top flex">
				<view class="tt_left flex">
					<image class="c_prompt_line" src="/pages/business/static/c_prompt_line.png" mode=""></image>
					<text class="color_2">交易明细</text>
				</view>
				<view class="tt_right flex" @click="openTime">
					<image class="c_date_line" src="/pages/business/static/c_date_line.png" mode=""></image>
					<text class="color_1">时间筛选</text>
				</view>
			</view>
			<view v-if="static.total">
				<view class="td_box bg_td_box">
					<view class="top flex">
						<view class="tt_left flex">
							<image class="c_prompt_line" src="/pages/business/static/c_prompt_line.png" mode=""></image>
							<text class="color_2">筛选日期总计</text>
						</view>
						<view class="tt_right flex time_all" @click="openTime">
							<text class="color_3">{{static.search_start}}至{{static.search_end}}</text>
						</view>
					</view>
					<view class="d_center">
						<view class="min_del">
							<text class="color_3">补贴米券（元）</text>
							<view class="auto-wrap">{{static.acc||0}}</view>
						</view>
						<view class="min_del flex ">
							<image class="line" src="/pages/business/static/c_line.png" mode=""></image>
							<view class="min_del_left">
								<text class="color_3">营业金额（元）</text>
								<view>{{static.turnover||0}}</view>
							</view>
						</view>
						<view class="min_del">
							<text class="color_3">商家让利（元）</text>
							<view>{{static.dis||0}}</view>
						</view>

						<view class="min_del flex">
							<image class="line" src="/pages/business/static/c_line.png" mode=""></image>
							<view class="min_del_left">
								<text class="color_3">实际到账（券）</text>
								<view>{{static.receipt||0}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order_all color_1" v-if="static.total">
				<image src="/pages/business/static/c_loading.png" mode=""></image>
				共计{{static.total}}项符合筛选条件
			</view>
			<view v-if="list.length>0">
				<view class="td_box" v-for="item,i in list" :key="i">
					<view class="tdb_top flex">
						<view class="left">
							<text class="color_3">付款方信息：</text>
							<text class="color_2">{{item.remark}}</text>
						</view>
						<view class="right color_1">
							扫码转账
						</view>
					</view>
					<image class="none_line" src="/pages/business/static/dashed_line.png" mode=""></image>
					<view class="d_center">
						<view class="min_del">
							<text class="color_3">支付金额（元）</text>
							<view>{{item.price||0}}</view>
						</view>
						<view class="min_del">
							<text class="color_3">让利金额（元）</text>
							<view>{{item.needmoney||0}}</view>
						</view>
						<view class="min_del">
							<text class="color_3">到账金额（元）</text>
							<view>{{item.realmoney||0}}</view>
						</view>
						<view class="min_del">
							<text class="color_3">最高补贴米券（券）</text>
							<view>{{item.ratesupmoney||0}}</view>
						</view>
					</view>
					<view class="miquan_box flex">
						<view class="left flex">
							<image src="/pages/business/static/c_miquan.png" mode=""></image>
							<text class="color_2">已补贴米券：</text>
						</view>
						<view class="right flex" @click="goDetails(item)">
							<text class="color_1">{{item.sendsupmoney||0}}</text>
							<image src="/pages/business/static/c_right_arror.png" mode=""></image>
						</view>
					</view>
					<image class="none_line" src="/pages/business/static/dashed_line.png" mode=""></image>
					<view class="time color_3">
						该订单支付于：{{item.createtime}}
					</view>
				</view>
			</view>
			<view class="none_data" v-else>
				<image src="/pages/business/static/c_nonedata.png" mode=""></image>
				<view>没有符合条件的内容</view>
			</view>
			<view class="loading_message">
				<image v-if="isloading" src="../../static/business/loading.gif"></image>
				<view v-if="isempty&&list.length!=0">—— 没有更多了 ——</view>
			</view>
		</view>
		<uni-popup ref="time_popup" type="bottom">
			<view class="time_box">
				<text class="tit">时间筛选</text>
				<uni-datetime-picker class="datetime" v-model="datetimerange" type="daterange" rangeSeparator="至"
					@change="changeDate" />
				<view class="btn_box flex">
					<text class="clear" @click="clearList">清空设置</text> 
					<text class="ready" @click="ready">开始筛选</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topStatus: false,
				page: 0,
				list: [],
				isempty: false,
				isloading: false,
				headInfo: [],
				statusOpen: false,
				chooseType: 0,
				allMoneyObj: {
					already: '',
					sale: '',
					fee: '',
					supCapital: ''
				},
				listTime: [{
					name: '总计'
				}, {
					name: '上月'
				}, {
					name: '本月'
				}, {
					name: '昨日'
				}, {
					name: '今日'
				}],
				datetimerange: [], //时间
				start_date: '',
				end_date: '',
				static:{}
			}
		},
		onReachBottom() {
			this.getilist();
		},
		onLoad() {
			this.getilist();
			this.headIncome();
		},
		onPageScroll(e) {
			if (e.scrollTop > 0) {
				this.topStatus = true;
			} else {
				this.topStatus = false;
			}
		},
		methods: {
			refund() {
				uni.navigateBack()
			},
			goDetails(item) {
				this.$navTo('/pages/business/subsidyDetails?id=' + item.id)
			},
			clearList() {
				this.$refs.time_popup.close()
				this.datetimerange = []
				this.list = []
				this.page = 0
				this.start_date = ''
				this.end_date = ''
				this.static={}
				this.getilist()
			},
			ready() {
				this.$refs.time_popup.close()
				this.$axios('transLog/incomeSearchSta', 'POST', 'bonus', {
					page: this.page,
					search_start: this.start_date,
					search_end: this.end_date
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = []
						this.page = 0
						this.getilist()
						this.static=res.data.data
					}
				})
				
				// static
			},
			changeDate(e) {
				if (e.length > 0) {
					this.start_date = e[0];
					this.end_date = e[1];
				} else {
					this.start_date = '';
					this.end_date = '';
				}
			},
			openTime() {
				this.$refs.time_popup.open()
			},
			changTimeData(i) {
				if (i != this.chooseType) {
					this.chooseType = i
					switch (i) {
						case 0:
							this.allMoneyObj = {
								already: this.headInfo.totalFeeAlready,
								sale: this.headInfo.totalSale,
								fee: this.headInfo.totalFee,
								supCapital: this.headInfo.totalSupCapital
							}
							break;
						case 1:
							this.allMoneyObj = {
								already: this.headInfo.priMothAcc,
								sale: this.headInfo.priMoth,
								fee: this.headInfo.priMothDis,
								supCapital: this.headInfo.priMothReceipt
							}
							break;
						case 2:
							this.allMoneyObj = {
								already: this.headInfo.curMothAcc,
								sale: this.headInfo.curMoth,
								fee: this.headInfo.curMothDis,
								supCapital: this.headInfo.curMothReceipt
							}
							break;
						case 3:
							this.allMoneyObj = {
								already: this.headInfo.yesDayAcc,
								sale: this.headInfo.yesDay,
								fee: this.headInfo.yesDayDis,
								supCapital: this.headInfo.yesDayReceipt
							}
							break;
						case 4:
							this.allMoneyObj = {
								already: this.headInfo.curDayAcc,
								sale: this.headInfo.curDay,
								fee: this.headInfo.curDayDis,
								supCapital: this.headInfo.curDayReceipt
							}
							break;
						default:
							break;
					}
				}

			},
			changStatus() {
				this.statusOpen = !this.statusOpen
			},
			getilist() {
				this.page += 1;
				this.isloading = true;
				this.$axios('transLog/income', 'POST', 'bonus', {
					page: this.page,
					search_start: this.start_date,
					search_end: this.end_date
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let length = res.data.data.length;
						this.list = this.list.concat(res.data.data);
						this.isempty = length <= 0 ? true : false;
						// this.static=res.data.data.static
					}
				})
			},
			headIncome() {
				this.$axios('transLog/headIncome', 'POST', 'bonus').then(res => {
					if (res.data.code == 200) {
						this.headInfo = res.data.data;
						this.allMoneyObj = {
							already: this.headInfo.totalFeeAlready,
							sale: this.headInfo.totalSale,
							fee: this.headInfo.totalFee,
							supCapital: this.headInfo.totalSupCapital
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-calendar-item--before-checked,
	::v-deep .uni-calendar-item--after-checked,
	::v-deep .uni-datetime-picker--btn {
		background-color: #8813E2 !important;
	}

	::v-deep .selected-item-active {
		border-bottom: 2px solid #8813E2;
	}

	.time_box {
		padding: 30rpx;
		border-radius: 24rpx 24rpx 0px 0px;
		background-color: #fff;

		.tit {
			color: #13001E;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 40rpx;
		}

		.datetime {
			margin: 20rpx auto;
		}

		.btn_box {
			justify-content: space-between;
			font-size: 28rpx;
			text-align: center;
			font-weight: bold;
			line-height: 80rpx;
			margin-top: 40rpx;

			.clear {
				border-radius: 90rpx;
				width: 238rpx;
				height: 80rpx;
				border: 2rpx solid #CCCACD;
			}

			.ready {
				border-radius: 90rpx;
				width: 440rpx;
				height: 80rpx;
				background: linear-gradient(96deg, #FF38E5 0%, #8813E2 61%);
				color: #fff;
			}
		}
	}

	.flex {
		display: flex;
	}

	.color_1 {
		color: #B62BF0;
	}

	.color_2 {
		color: #13001E;
	}

	.color_3 {
		color: #5B5B5B;
	}

	.transaction_details {
		width: 100%;
		// margin: 20rpx auto;
		padding: 20rpx;
		background-color: #fdf8ff;

		.time {
			margin: 10rpx auto;
			font-size: 28rpx;
		}

		.miquan_box {
			justify-content: space-between;
			align-items: center;
			// margin: 20rpx 0 0;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.left,
			.right {
				align-items: center;
			}

			.left {
				text {
					margin-left: 10rpx;
					font-size: 28rpx;
				}
			}

			.right {

				// image{
				// 	margin-left: 10rpx;
				// }
				text {
					font-size: 36rpx;
					font-weight: bold;
					margin-right: 20rpx;
				}
			}
		}

		.top {
			justify-content: space-between;

			.tt_left,
			.tt_right {
				align-items: center;
				font-size: 28rpx;
			}

			.time_all {
				font-size: 20rpx;
			}

			.tt_left {
				font-weight: bold;
			}

			.c_prompt_line {
				width: 10rpx;
				height: 20rpx;
				margin-right: 20rpx;

			}

			.c_date_line {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

		}

		.td_box {
			width: 100%;
			border-radius: 16rpx;
			// height: 504rpx;
			margin: 30rpx 0;
			background-color: #fff;
			padding: 20rpx;

			.tdb_top {
				justify-content: space-between;
				font-size: 28rpx;

				.right {
					width: 112rpx;
					height: 34rpx;
					border-radius: 8rpx;
					background: rgba(154, 31, 232, 0.15);
					font-size: 20rpx;
					font-weight: bold;
					text-align: center;
					line-height: 34rpx;
				}
			}

			.d_center {
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;

				.min_del {
					width: 50%;
					margin-bottom: 20rpx;

					text {
						font-size: 20rpx;
					}

					view {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.line {
					width: 2rpx;
					height: 84rpx;
				}
			}
		}
	}

	.bg {
		width: 100%;
		height: 600rpx;
		background-size: 100% 100%;
		background-position: center center;

		.detail_msg {
			background-color: #fff;
			width: 95%;
			height: 366rpx;
			box-sizing: border-box;
			// border: 2rpx solid;
			margin: 40rpx auto;
			border-radius: 16rpx;
			position: relative;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background: radial-gradient(66% 66% at 83% -7%, rgba(154, 31, 232, 0.42) 0%, rgba(154, 31, 232, 0) 100%), #FFFFFF;



			.dmt_image {
				position: absolute;
				right: 0;
				top: -70rpx;
				width: 240rpx;
				height: 240rpx;
			}

			.btom {
				font-size: 24rpx;

				// .bt_tit{
				// 	font-size: 24rpx;
				// }
				.update_msg {

					margin-left: 20rpx;

					text {
						margin-right: 20rpx;
					}
				}

				.choose_time {
					color: #9A1FE8;
					font-weight: bold;
				}
			}

			.top {
				text {
					font-size: 28rpx;
				}

				view {
					// height: 70rpx;
					font-size: 60rpx;
					font-weight: bold;
					width: calc(100% - 200rpx);
					word-break: break-all;
				}
			}

			.d_center {
				display: flex;
				justify-content: space-between;

				.min_del {
					text {
						font-size: 20rpx;
					}

					view {
						font-size: 32rpx;
						font-weight: bold;
					}
					.auto-wrap{
						/* 基础换行设置 */
						  white-space: normal;
						  
						  /* 处理长数字/英文单词的强制换行 */
						  word-break: break-all;
						  
						  /* 可选：设置容器最大宽度，根据需要调整 */
						  max-width: 100%;
					}
				}

				.line {
					width: 2rpx;
					height: 84rpx;
				}
			}
		}

		.tit_box {
			width: 100%;
			// height: 176rpx;
			padding: 100rpx 20rpx 20rpx;
			// background-color: #B62BF0;
			// padding: 40rpx 20rpx;
			text-align: center;
			display: flex;

			.img_box {
				width: 40rpx;
				height: 40rpx;
				// background-color: pink;

				// margin-top: 70rpx;
				image {
					width: 18rpx;
					height: 34rpx;
				}
			}

			text {
				width: 240rpx;
				text-align: center;
				position: absolute;
				left: calc(50% - 100rpx);
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: bold;
				// display: inline-block;
				// margin-top: 70rpx;
			}
		}
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: #9A1FE8;
	}

	.none_line {
		width: 100%;
		height: 2rpx;
	}

	.loading_message image {
		display: block;
		margin: 0 auto;
		height: 60upx;
		width: 60upx;
	}

	.loading_message view {
		text-align: center;
		color: #9E9E9E;
	}

	.none_data view {
		color: #13001E;
		font-size: 28rpx;
		font-weight: normal;
		margin-top: 20rpx;
	}

	.none_data image {
		width: 240rpx;
		height: 240rpx;
	}

	.detail_msg2 {
		top: 192rpx;
	}

	.min_del_left {
		margin-left: 30rpx;
	}

	.bg_td_box {
		background: radial-gradient(66% 66% at 83% -7%, rgba(154, 31, 232, 0.42) 0%, rgba(154, 31, 232, 0) 100%), #FFFFFF;
	}

	.order_all {
		width: 100%;
		height: 80rpx;
		border-radius: 16rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f2e2fc;

		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 15rpx;
		}
	}
</style>